<script setup>
defineProps({
  width: { type: String, default: '60px' },
  height: { type: String, default: '50px' },
  fit: { type: String, default: 'cover' },
  url: { required: true, type: String },
  isPreview: { type: Boolean, default: true } // 是否开启图像预览
})
</script>

<template>
  <el-image
    :style="{ width, height }"
    :src="url"
    :preview-src-list="isPreview ? [url] : []"
    fit="cover"
  >
    <template #error>
      <div class="image-slot">
        <el-icon><Picture /></el-icon>
      </div>
    </template>
  </el-image>
</template>

<style lang="scss" scoped>
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
}
</style>
